<template>
  <div class="home-container">
    <!-- 轮播图 -->
    <div class="banner-section">
      <el-carousel height="500px">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <div class="banner-item" :style="{ backgroundImage: `url(${item.imgUrl})` }">
            <div class="banner-content container">
              <h1 class="banner-title">{{ item.title }}</h1>
              <p class="banner-desc">{{ item.desc }}</p>
              <el-button type="primary" size="large" round @click="goToVehicleList">立即租车</el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      
      <!-- 搜索框 -->
      <div class="search-box container">
        <el-form :model="searchForm" :inline="true" size="small">
          <el-form-item>
            <el-select v-model="searchForm.type" placeholder="车辆类型" clearable>
              <el-option label="经济型" value="1"></el-option>
              <el-option label="舒适型" value="2"></el-option>
              <el-option label="豪华型" value="3"></el-option>
              <el-option label="SUV" value="4"></el-option>
              <el-option label="MPV" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="取车日期"
              end-placeholder="还车日期"
              value-format="yyyy-MM-dd"
              style="width: 260px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索车辆</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    
    <div class="container">
      <!-- 服务优势 -->
      <div class="advantage-section section">
        <h2 class="section-title">我们的优势</h2>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="6" v-for="(item, index) in advantageList" :key="index">
            <div class="advantage-item">
              <i :class="item.icon"></i>
              <h3>{{ item.title }}</h3>
              <p>{{ item.desc }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
      
      <!-- 热门车型 -->
      <div class="hot-vehicles-section section">
        <h2 class="section-title">热门车型</h2>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="vehicle in hotVehicles" :key="vehicle.id">
            <el-card shadow="hover" class="vehicle-card" @click.native="viewDetail(vehicle.id)">
              <div class="vehicle-image">
                <img :src="vehicle.imageUrl" :alt="vehicle.name" @error="handleImageError">
                <div v-if="vehicle.tags && vehicle.tags.length" class="vehicle-tags">
                  <el-tag v-for="(tag, index) in vehicle.tags" :key="index" size="mini" :type="getTagType(tag)">{{ tag }}</el-tag>
                </div>
              </div>
              <div class="vehicle-info">
                <h3 class="vehicle-title">{{ vehicle.name }}</h3>
                <div class="vehicle-meta">
                  <span><i class="el-icon-odometer"></i> {{ vehicle.type }}</span>
                  <span><i class="el-icon-user"></i> {{ vehicle.seats }}座</span>
                </div>
                <div class="vehicle-bottom">
                  <div class="vehicle-price">
                    <span class="price">¥{{ vehicle.dailyPrice }}</span>
                    <span class="unit">/天</span>
                  </div>
                  <el-button size="small" type="primary" @click.stop="rentNow(vehicle.id)">租车</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div class="more-btn">
          <el-button type="primary" plain @click="goToVehicleList">查看更多车型</el-button>
        </div>
      </div>
      
      <!-- 租车流程 -->
      <div class="process-section section">
        <h2 class="section-title">租车流程</h2>
        <el-steps :active="4" finish-status="success" simple>
          <el-step title="在线预约" icon="el-icon-edit"></el-step>
          <el-step title="支付订金" icon="el-icon-wallet"></el-step>
          <el-step title="门店取车" icon="el-icon-truck"></el-step>
          <el-step title="快乐用车" icon="el-icon-service"></el-step>
          <el-step title="按时还车" icon="el-icon-finished"></el-step>
        </el-steps>
      </div>
    </div>
  </div>
</template>

<script>
import { getRecommendVehicles, getHotVehicles } from '@/api/vehicle'

export default {
  name: 'Home',
  data() {
    return {
      searchForm: {
        type: '',
        dateRange: []
      },
      bannerList: [
        {
          imgUrl: 'https://img1.baidu.com/it/u=4217837805,2073754878&fm=253&fmt=auto&app=138&f=JPEG?w=1181&h=500',
          title: '自驾出行新选择',
          desc: '多种车型，任您挑选，尊享舒适旅程'
        },
        {
          imgUrl: 'https://img2.baidu.com/it/u=2110690340,2324136367&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500',
          title: '特惠租车',
          desc: '新用户首单立减100元，多种优惠活动等您来'
        },
        {
          imgUrl: 'https://img2.baidu.com/it/u=4045009728,3219591373&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
          title: '豪华车型',
          desc: '商务出行，体验豪华座驾，打造专属体验'
        }
      ],
      advantageList: [
        {
          icon: 'el-icon-s-grid',
          title: '车型丰富',
          desc: '经济、舒适、豪华、SUV等多种车型供您选择'
        },
        {
          icon: 'el-icon-money',
          title: '价格透明',
          desc: '无隐形消费，价格公开透明，租车更放心'
        },
        {
          icon: 'el-icon-location',
          title: '门店广泛',
          desc: '全国300+门店网络，异地取还更便捷'
        },
        {
          icon: 'el-icon-service',
          title: '全天候服务',
          desc: '24小时客服支持，随时解决您的用车问题'
        }
      ],
      hotVehicles: []
    }
  },
  created() {
    this.fetchHotVehicles()
  },
  methods: {
    async fetchHotVehicles() {
      try {
        // 直接使用热门车辆API
        const res = await getHotVehicles(8)
        
        if (res.code === 0 || res.code === 200) {
          this.hotVehicles = res.data.records || []
          
          // 如果没有数据，添加演示数据
          if (this.hotVehicles.length === 0) {
            this.addDemoVehicles()
          }
        }
      } catch (error) {
        console.error('获取热门车辆失败', error)
        this.addDemoVehicles()
      }
    },
    addDemoVehicles() {
      this.hotVehicles = [
        {
          id: 1,
          name: '奥迪A6L',
          type: '豪华轿车',
          seats: 5,
          dailyPrice: 399,
          imageUrl: 'https://img2.baidu.com/it/u=306367250,2071323421&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
          tags: ['热门', '新车']
        },
        {
          id: 2,
          name: '丰田凯美瑞',
          type: '中型轿车',
          seats: 5,
          dailyPrice: 299,
          imageUrl: 'https://img0.baidu.com/it/u=3581278429,1145643938&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          tags: ['经济']
        },
        {
          id: 3,
          name: '宝马X5',
          type: 'SUV',
          seats: 5,
          dailyPrice: 599,
          imageUrl: 'https://img0.baidu.com/it/u=935297709,3165513922&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          tags: ['豪华', 'SUV']
        },
        {
          id: 4,
          name: '别克GL8',
          type: 'MPV',
          seats: 7,
          dailyPrice: 399,
          imageUrl: 'https://img2.baidu.com/it/u=1006327316,1969001512&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          tags: ['商务', '舒适']
        },
        {
          id: 5,
          name: '大众帕萨特',
          type: '中型轿车',
          seats: 5,
          dailyPrice: 269,
          imageUrl: 'https://img0.baidu.com/it/u=3414303621,2644245943&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          tags: ['热门']
        },
        {
          id: 6,
          name: '本田CR-V',
          type: 'SUV',
          seats: 5,
          dailyPrice: 329,
          imageUrl: 'https://img0.baidu.com/it/u=3190848905,2492818095&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          tags: ['舒适', 'SUV']
        },
        {
          id: 7,
          name: '奔驰E级',
          type: '豪华轿车',
          seats: 5,
          dailyPrice: 499,
          imageUrl: 'https://img2.baidu.com/it/u=1981637542,2736078486&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          tags: ['豪华', '热门']
        },
        {
          id: 8,
          name: '特斯拉Model 3',
          type: '纯电动',
          seats: 5,
          dailyPrice: 499,
          imageUrl: 'https://img1.baidu.com/it/u=1186615773,3459737037&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          tags: ['新能源', '热门']
        }
      ]
    },
    handleSearch() {
      const query = {}
      
      if (this.searchForm.type) {
        query.type = this.searchForm.type
      }
      
      if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
        query.startDate = this.searchForm.dateRange[0]
        query.endDate = this.searchForm.dateRange[1]
      }
      
      this.$router.push({
        path: '/vehicle/list',
        query
      })
    },
    goToVehicleList() {
      this.$router.push('/vehicle/list')
    },
    viewDetail(id) {
      const query = {}
      if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
        query.startDate = this.searchForm.dateRange[0]
        query.endDate = this.searchForm.dateRange[1]
      }
      
      this.$router.push({
        path: `/vehicle/detail/${id}`,
        query
      })
    },
    rentNow(id) {
      const query = { vehicleId: id }
      
      if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
        query.startDate = this.searchForm.dateRange[0]
        query.endDate = this.searchForm.dateRange[1]
      }
      
      this.$router.push({
        path: '/order/create',
        query
      })
    },
    getTagType(tag) {
      switch (tag) {
        case '热门':
          return 'danger'
        case '新车':
          return 'success'
        case '豪华':
          return 'warning'
        case 'SUV':
        case '商务':
          return 'info'
        case '经济':
          return 'success'
        case '舒适':
          return 'primary'
        case '新能源':
          return 'success'
        default:
          return ''
      }
    },
    handleImageError(e) {
      // 处理图片加载失败，使用默认图片
      e.target.src = require('@/assets/car-placeholder.png')
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  .banner-section {
    position: relative;
    margin-bottom: 30px;
    
    .banner-item {
      height: 100%;
      background-size: cover;
      background-position: center;
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
      }
      
      .banner-content {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        
        .banner-title {
          font-size: 42px;
          margin-bottom: 20px;
        }
        
        .banner-desc {
          font-size: 20px;
          margin-bottom: 30px;
          max-width: 600px;
        }
      }
    }
    
    .search-box {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 50%);
      background: #fff;
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      display: flex;
      justify-content: center;
      z-index: 10;
    }
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
  }
  
  .section {
    padding: 60px 0;
    
    .section-title {
      text-align: center;
      margin-bottom: 40px;
      font-size: 28px;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 3px;
        background: #409EFF;
      }
    }
  }
  
  .advantage-section {
    .advantage-item {
      text-align: center;
      padding: 30px 20px;
      margin-bottom: 20px;
      transition: transform 0.3s, box-shadow 0.3s;
      border-radius: 4px;
      
      &:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }
      
      i {
        font-size: 48px;
        color: #409EFF;
        margin-bottom: 20px;
      }
      
      h3 {
        font-size: 18px;
        margin-bottom: 15px;
      }
      
      p {
        color: #606266;
        line-height: 1.6;
      }
    }
  }
  
  .hot-vehicles-section {
    .vehicle-card {
      margin-bottom: 20px;
      cursor: pointer;
      transition: transform 0.3s, box-shadow 0.3s;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }
      
      .vehicle-image {
        position: relative;
        height: 160px;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s;
        }
        
        .vehicle-tags {
          position: absolute;
          top: 10px;
          left: 10px;
          
          .el-tag {
            margin-right: 5px;
          }
        }
      }
      
      .vehicle-info {
        padding: 15px 0 5px;
        
        .vehicle-title {
          font-size: 16px;
          margin: 0 0 10px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .vehicle-meta {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 10px;
          color: #666;
          font-size: 13px;
          
          span {
            margin-right: 15px;
            margin-bottom: 5px;
            
            i {
              margin-right: 5px;
            }
          }
        }
        
        .vehicle-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .vehicle-price {
            .price {
              font-size: 18px;
              font-weight: bold;
              color: #f56c6c;
            }
            
            .unit {
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
    
    .more-btn {
      text-align: center;
      margin-top: 20px;
    }
  }
  
  .process-section {
    .el-steps {
      margin-top: 40px;
    }
  }
}

@media (max-width: 768px) {
  .home-container {
    .banner-section {
      .banner-item {
        .banner-content {
          .banner-title {
            font-size: 28px;
          }
          
          .banner-desc {
            font-size: 16px;
          }
        }
      }
      
      .search-box {
        position: static;
        transform: none;
        margin-top: 20px;
        padding: 15px;
        
        .el-form {
          flex-direction: column;
          
          .el-form-item {
            margin-bottom: 10px;
          }
        }
      }
    }
    
    .section {
      padding: 40px 0;
    }
  }
}
</style> 